<template>
  <div style="display: flex;">
    <div style="width:200px;margin-right: 10px;" v-if="TenantIds">
      <a-card :bordered="false">
        <a-input-search @search="getTenant" style="width:100%;" allowClear placeholder="请输入租户名称" />
        <a-list
          :split="false"
          item-layout="horizontal"
          :data-source="listData"
          style="margin-top:20px;max-height: 747px;overflow-y: auto;"
        >
          <a-list-item slot="renderItem" slot-scope="item, index">
            <a-list-item-meta>
              <a slot="title" @click="searchData(item)" :style="{ color: item.id == tenantId ? '#13C2C2' : '' }">{{
                item.name
              }}</a>
            </a-list-item-meta>
          </a-list-item>
        </a-list>
      </a-card>
    </div>
    <div style="flex:1">
      <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">
              <a-col :md="6" :sm="12">
                <a-form-item label="账号">
                  <!--<a-input placeholder="请输入账号查询" v-model="queryParam.username"></a-input>-->
                  <j-input placeholder="输入账号模糊查询" v-model="queryParam.username"></j-input>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="12">
                <a-form-item label="身份">
                  <j-dict-select-tag type="list" v-model="queryParam.userIdentity" dictCode="user_identity" placeholder="请选择身份" />
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-item label="性别">
                  <a-select v-model="queryParam.sex" placeholder="请选择性别">
                    <a-select-option value="">请选择</a-select-option>
                    <a-select-option value="1">男</a-select-option>
                    <a-select-option value="2">女</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>

              <template v-if="toggleSearchStatus">
                <a-col :md="6" :sm="8">
                  <a-form-item label="真实名字">
                    <a-input placeholder="请输入真实名字" v-model="queryParam.realname"></a-input>
                  </a-form-item>
                </a-col>

                <a-col :md="6" :sm="8">
                  <a-form-item label="手机号码">
                    <a-input placeholder="请输入手机号码查询" v-model="queryParam.phone"></a-input>
                  </a-form-item>
                </a-col>

                <a-col :md="6" :sm="8">
                  <a-form-item label="用户状态">
                    <a-select v-model="queryParam.status" placeholder="请选择">
                      <a-select-option value="">请选择</a-select-option>
                      <a-select-option value="1">正常</a-select-option>
                      <a-select-option value="2">冻结</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
              </template>

              <a-col :md="6" :sm="8">
                <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                  <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                  <a-button type="primary" @click="searchReset2" icon="reload" style="margin-left: 8px">重置</a-button>
                  <a @click="handleToggleSearch" style="margin-left: 8px">
                    {{ toggleSearchStatus ? '收起' : '展开' }}
                    <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
                  </a>
                </span>
              </a-col>
            </a-row>
          </a-form>
        </div>

        <!-- 操作按钮区域 -->
        <div class="table-operator" style="border-top: 5px">
          <a-button @click="handleAdd" type="primary" icon="plus" v-has="'user:add'">添加用户</a-button>
          <a-button type="primary" icon="download" @click="handleExportXls('用户信息')" v-has="'user:export'">导出</a-button>
          <a-upload
            name="file"
            v-has="'user:import'"
            :showUploadList="false"
            :multiple="false"
            :headers="tokenHeader"
            :action="importExcelUrl"
            :data="uploadData"
            @change="handleImportExcel"
          >
            <a-button type="primary" icon="import">导入</a-button>
          </a-upload>
          <j-third-app-button
            biz-type="user"
            :selected-row-keys="selectedRowKeys"
            syncToApp
            syncToLocal
            @sync-finally="onSyncFinally"
          />
          <!-- <a-button type="primary" icon="hdd" @click="recycleBinVisible = true">回收站</a-button> -->
          <a-dropdown v-if="selectedRowKeys.length > 0">
            <a-menu slot="overlay" @click="handleMenuClick">
              <a-menu-item key="1" v-has="'user:deteleBatch'">
                <a-icon type="delete" @click="batchDel" />
                删除
              </a-menu-item>
              <a-menu-item key="2" v-has="'user:freeze'">
                <a-icon type="lock" @click="batchFrozen('2')" />
                冻结
              </a-menu-item>
              <a-menu-item key="3" v-has="'user:thaw'">
                <a-icon type="unlock" @click="batchFrozen('1')" />
                解冻
              </a-menu-item>
            </a-menu>
            <a-button style="margin-left: 8px">
              批量操作
              <a-icon type="down" />
            </a-button>
          </a-dropdown>
          <!-- <j-super-query :fieldList="superQueryFieldList" @handleSuperQuery="handleSuperQuery" /> -->
        </div>

        <!-- table区域-begin -->
        <div>
          <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
            <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{
              selectedRowKeys.length
            }}</a
            >项&nbsp;&nbsp;
            <a style="margin-left: 24px" @click="onClearSelected">清空</a>
          </div>

          <a-table
            ref="table"
            bordered
            size="middle"
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            @change="handleTableChange"
          >
            <template slot="avatarslot" slot-scope="text, record, index">
              <div class="anty-img-wrap">
                <a-avatar shape="square" :src="getAvatarView(record.avatar)" icon="user" />
              </div>
            </template>

            <span slot="action" slot-scope="text, record">
              <a-space>

                <a @click="handleEdit(record)" v-has="'user:edit'">编辑</a>
  
  
                <a-dropdown>
                  <a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
                  <a-menu slot="overlay">
                    <a-menu-item v-has="'user:info'">
                      <a href="javascript:;" @click="handleDetail(record)">详情</a>
                    </a-menu-item>
  
                    <a-menu-item v-has="'user:password'">
                      <a href="javascript:;" @click="handleChangePassword(record.username)">密码</a>
                    </a-menu-item>
  
                    <a-menu-item v-has="'user:detele'">
                      <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                        <a>删除</a>
                      </a-popconfirm>
                    </a-menu-item>
  
                    <a-menu-item v-if="record.status == 1" v-has="'user:freeze'">
                      <a-popconfirm title="确定冻结吗?" @confirm="() => handleFrozen(record.id, 2, record.username)">
                        <a>冻结</a>
                      </a-popconfirm>
                    </a-menu-item>
  
                    <a-menu-item v-if="record.status == 2" v-has="'user:thaw'">
                      <a-popconfirm title="确定解冻吗?" @confirm="() => handleFrozen(record.id, 1, record.username)">
                        <a>解冻</a>
                      </a-popconfirm>
                    </a-menu-item>
                  </a-menu>
                </a-dropdown>
              </a-space>
            </span>
          </a-table>
        </div>
        <!-- table区域-end -->

        <user-modal ref="modalForm" @ok="modalFormOk" :tenantId="tenantId"></user-modal>

        <password-modal ref="passwordmodal" @ok="passwordModalOk"></password-modal>

        <sys-user-agent-modal ref="sysUserAgentModal"></sys-user-agent-modal>

        <!-- 用户回收站 -->
        <user-recycle-bin-modal :visible.sync="recycleBinVisible" @ok="modalFormOk" />
      </a-card>
    </div>
  </div>
</template>

<script>
import UserModal from './modules/UserModal'
import PasswordModal from './modules/PasswordModal'
import { getAction, putAction, getFileAccessHttpUrl } from '@/api/manage'
import { frozenBatch } from '@/api/api'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import SysUserAgentModal from './modules/SysUserAgentModal'
import JInput from '@/components/jeecg/JInput'
import UserRecycleBinModal from './modules/UserRecycleBinModal'
import JSuperQuery from '@/components/jeecg/JSuperQuery'
import JThirdAppButton from '@/components/jeecgbiz/thirdApp/JThirdAppButton'
import { USER_INFO } from '@/store/mutation-types'
import Vue from 'vue'
export default {
  name: 'UserList',
  mixins: [JeecgListMixin],
  components: {
    JThirdAppButton,
    SysUserAgentModal,
    UserModal,
    PasswordModal,
    JInput,
    UserRecycleBinModal,
    JSuperQuery
  },
  data() {
    return {
      listData: [],
      relTenantIds: '',
      tenantId: '',
      description: '这是用户管理页面',
      queryParam: {},
      recycleBinVisible: false,
      columns: [
        /*{
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },*/
        {
          title: '用户账号',
          align: 'center',
          dataIndex: 'username',
          sorter: true
        },
        {
          title: '用户姓名',
          align: 'center',
          dataIndex: 'realname'
        },
        {
          title: '身份',
          align: 'center',
          dataIndex: 'userIdentity',
          customRender:function(text){
            if (text == 3) {
              return '教职工'
            }
            if (text == 4) {
              return '家长'
            }
            if (text == 5) {
              return '管理员'
            }
          }
        },

        {
          title: '性别',
          align: 'center',
          dataIndex: 'sex_dictText',
          sorter: true
        },
        {
          title: '生日',
          align: 'center',
          dataIndex: 'birthday'
        },
        {
          title: '手机号码',
          align: 'center',
          dataIndex: 'phone'
        },
        {
          title: '部门',
          align: 'center',
          dataIndex: 'orgCodeTxt'
        },
        {
          title: '职务',
          align: 'center',
          dataIndex: 'post_dictText'
        },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'status_dictText'
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          align: 'center'
        }
      ],
      superQueryFieldList: [
        { type: 'input', value: 'username', text: '用户账号' },
        { type: 'input', value: 'realname', text: '用户姓名' },
        { type: 'select', value: 'sex', dbType: 'int', text: '性别', dictCode: 'sex' }
      ],
      url: {
        syncUser: '/act/process/extActProcess/doSyncUser',
        list: '/sys/user/list',
        delete: '/sys/user/delete',
        deleteBatch: '/sys/user/deleteBatch',
        exportXlsUrl: '/sys/user/exportXls',
        importExcelUrl: 'sys/user/importExcel'
      },
      uploadData:{}
    }
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
    TenantIds(){
      return this.$store.state.skCommon.relTenantIds.indexOf(Vue.ls.get(USER_INFO).relTenantIds) != -1
      // return this.$store.state.skCommon.relTenantIds
    }
  },
  created() {
    this.getTenant()
    this.relTenantIds = Vue.ls.get(USER_INFO).relTenantIds
  },
  methods: {
    handleExport(fileName){
      this.queryParam.tenantId = this.tenantId;
      this.handleExportXls(fileName)
    },
    getTenant(value) {
      const url = '/sys/tenant/listAll'
      let params = {
        name: value
      }
      getAction(url, params)
        .then(res => {
          if (res.success) {
            this.listData = res.result
            if (this.TenantIds) {
              this.$refs.modalForm.initRoleList(this.tenantId)
              this.searchData(this.listData[0])
            } else {
              this.$refs.modalForm.initRoleList(this.relTenantIds)
              this.searchData({id:this.relTenantIds})
            }
          } else {
            this.$message.warning(res.message)
          }
        })
        .catch(error => {
          console.error(error)
        })
    },

    searchData(data) {
      this.tenantId = data.id
      this.uploadData.tenantId =  data.id;
      this.$refs.modalForm.initRoleList(this.tenantId)
      this.queryParam = {}
      this.queryParam.relTenantIds = data.id
      this.searchQuery()
    },
    searchReset2(){
      this.queryParam = {
        relTenantIds:this.tenantId
      }
      this.loadData(1);
    },
    getAvatarView: function(avatar) {
      return getFileAccessHttpUrl(avatar)
    },
    batchFrozen: function(status) {
      if (this.selectedRowKeys.length <= 0) {
        this.$message.warning('请选择一条记录！')
        return false
      } else {
        let ids = ''
        let that = this
        let isAdmin = false
        that.selectionRows.forEach(function(row) {
          if (row.username == 'admin') {
            isAdmin = true
          }
        })
        if (isAdmin) {
          that.$message.warning('管理员账号不允许此操作,请重新选择！')
          return
        }
        that.selectedRowKeys.forEach(function(val) {
          ids += val + ','
        })
        that.$confirm({
          title: '确认操作',
          content: '是否' + (status == 1 ? '解冻' : '冻结') + '选中账号?',
          onOk: function() {
            frozenBatch({ ids: ids, status: status }).then(res => {
              if (res.success) {
                that.$message.success(res.message)
                that.loadData()
                that.onClearSelected()
              } else {
                that.$message.warning(res.message)
              }
            })
          }
        })
      }
    },
    handleMenuClick(e) {
      if (e.key == 1) {
        this.batchDel()
      } else if (e.key == 2) {
        this.batchFrozen(2)
      } else if (e.key == 3) {
        this.batchFrozen(1)
      }
    },
    handleFrozen: function(id, status, username) {
      let that = this
      //TODO 后台校验管理员角色
      if ('admin' == username) {
        that.$message.warning('管理员账号不允许此操作！')
        return
      }
      frozenBatch({ ids: id, status: status }).then(res => {
        if (res.success) {
          that.$message.success(res.message)
          that.loadData()
        } else {
          that.$message.warning(res.message)
        }
      })
    },
    handleChangePassword(username) {
      this.$refs.passwordmodal.show(username)
    },
    passwordModalOk() {
      //TODO 密码修改完成 不需要刷新页面，可以把datasource中的数据更新一下
    },
    onSyncFinally({ isToLocal }) {
      // 同步到本地时刷新下数据
      if (isToLocal) {
        this.loadData()
      }
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
